<template>
  <div class="mod-prod-checkbox">
    <el-form-item label="可多选规格">
      <el-button @click="addSpecGroup">添加规格组</el-button>
      <div
        v-for="(group, groupIndex) in specGroups"
        :key="groupIndex"
        class="spec-group"
      >
        <el-input
          v-model="group.groupName"
          placeholder="请输入规格组名称"
          class="group-name-input"
        />
        <el-button
          type="text"
          icon="el-icon-delete"
          @click="removeSpecGroup(groupIndex)"
          >删除组</el-button
        >

        <div class="spec-items">
          <div
            v-for="(item, itemIndex) in group.specItems"
            :key="item.valueId"
            class="spec-item"
          >
            <el-input
              v-model="item.propValue"
              placeholder="规格值名称"
              class="prop-value-input"
            />
            价格：
            <el-input
              v-model.number="item.price"
              placeholder="价格"
              type="number"
              :disabled="!item.enablePrice"
              class="price-input"
            />
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="removeSpecItem(groupIndex, itemIndex)"
              >删除</el-button
            >
          </div>

          <el-button @click="addSpecItem(groupIndex)" class="add-item-btn"
            >+ 添加规格值</el-button
          >
        </div>
      </div>
    </el-form-item>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessage, ElCheckbox, ElInput, ElButton } from "element-plus";
import { scoreProdStore } from "@/stores/prod.js";

const prod = scoreProdStore();
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue"]);

// 规格组数据
const specGroups = ref([
  {
    groupName: "",
    specItems: [],
  },
]);
// 选中的规格值ID
const selectedItems = ref([]);
// 规格值ID计数器
let valueIdCounter = 1;

// 监听选中项变化，更新父组件
watch(
  selectedItems,
  (newVal) => {
    const result = [];
    specGroups.value.forEach((group) => {
      group.specItems.forEach((item) => {
        if (newVal.includes(item.valueId)) {
          result.push({
            valueId: item.valueId,
            propValue: item.propValue,
            price: item.price,
            groupName: group.groupName,
          });
        }
      });
    });
    emit("update:modelValue", result);
  },
  { deep: true }
);

// 添加规格组
const addSpecGroup = () => {
  specGroups.value.push({
    groupName: "",
    specItems: [],
  });
};

// 删除规格组
const removeSpecGroup = (index) => {
  if (specGroups.value.length <= 1) {
    ElMessage.warning("至少保留一个规格组");
    return;
  }
  specGroups.value.splice(index, 1);
};

// 添加规格值
const addSpecItem = (groupIndex) => {
  specGroups.value[groupIndex].specItems.push({
    valueId: valueIdCounter++,
    propValue: "",
    price: 0,
    enablePrice: true,
  });
};

// 删除规格值
const removeSpecItem = (groupIndex, itemIndex) => {
  specGroups.value[groupIndex].specItems.splice(itemIndex, 1);
};

// 初始化数据
const init = (data) => {
  if (data && data.length) {
    specGroups.value = data;
    // 恢复选中状态
    const ids = [];
    data.forEach((group) => {
      group.specItems.forEach((item) => {
        ids.push(item.valueId);
      });
    });
    selectedItems.value = ids;
  }
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
.mod-prod-checkbox {
  .spec-group {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .group-name-input {
      width: 200px;
      margin-right: 10px;
      display: inline-block;
    }

    .spec-items {
      margin-top: 15px;
      padding-left: 20px;

      .spec-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .prop-value-input {
          width: 150px;
          margin-right: 10px;
        }
        .price-input {
          width: 120px;
          margin-left: 10px;
          margin-right: 10px;
        }
      }

      .add-item-btn {
        margin-top: 10px;
      }
    }
  }
}
</style>
